<template>
  <div class="icon-container">
    <!-- 使用 <img> 标签来插入自定义图标 -->
    <img
      src="./Tips.svg"
      alt="Custom Icon"
      class="custom-icon"
      @mouseover="onHover"
      @mouseleave="onLeave"
      ref="imgRef"
    />

    <!-- 鼠标悬浮时显示的文本框 -->
    <div
      ref="messageRef"
      v-if="isHovered"
      class="tooltip"
      :style="tooltipStyle"
    >
      {{ message }}
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, reactive, onMounted, watch } from "vue";

const imgRef = ref(null);
const messageRef = ref(null);

const props = defineProps({
  message: {
    type: String,
    default: `快捷键：\nF1：启动\nF2：减速\nF3：加速\nF4：最大推力\nF5：襟翼全收\nF6：收襟翼\nF7：放襟翼\nF8：襟翼全放\nF9：关车\nG：收放起落架`,
  },
});

let oldLeft = 0;

const getLongestLineLength = (str) => {
  // 将输入的字符串按换行符分割成数组
  const lines = str.split("\n");

  // 初始化一个变量来存储最大长度
  let maxLength = 0;

  // 遍历每一行
  for (let line of lines) {
    // 计算当前行的长度
    const lineLength = line.length;

    // 更新最大长度
    if (lineLength > maxLength) {
      maxLength = lineLength;
    }
  }

  // 返回最长的行的长度
  return maxLength;
};

watch(
  () => props.message,
  (newVal, oldVal) => {
    const maxLength = getLongestLineLength(newVal);
    tooltipStyle.width = maxLength * 15 + "px";
    tooltipStyle["margin-left"] = -maxLength * 15 + "px";
  }
);

onMounted(() => {
  const maxLength = getLongestLineLength(props.message);
  tooltipStyle.width = maxLength * 15 + "px";
  tooltipStyle["margin-left"] = -maxLength * 15 + "px";
});

const tooltipStyle = reactive({
  "margin-top": "-40px",
  "margin-left": "-125px",
  width: "105px",
});

// 控制是否显示文本框的状态
const isHovered = ref(false);

// 鼠标悬浮时改变图标路径并显示文本框
const onHover = () => {
  const originalUrl = imgRef.value.src;
  // 使用正则表达式将文件名部分替换为 _hover 版本
  let newUrl = originalUrl.replace(/(Tips)(\.svg)$/, "$1_hover$2");
  imgRef.value.src = newUrl;
  isHovered.value = true; // 设置为显示文本框
};

// 鼠标离开时恢复默认图标并隐藏文本框
const onLeave = () => {
  let originalUrl =
    "http://localhost:5173/src/views/learning/simulator/components/other/Tips.svg";
  // 使用正则表达式将文件名中的 '_hover' 部分替换
  let newUrl = originalUrl.replace(/_hover(\.svg)$/, "$1");
  imgRef.value.src = newUrl;
  isHovered.value = false; // 设置为隐藏文本框
};

const setToRight = () => {
  const maxLength = getLongestLineLength(props.message);
  tooltipStyle.width = maxLength * 15 + "px";
  tooltipStyle["margin-left"] = "43px";
};

const setToLeft = () => {
  const maxLength = getLongestLineLength(props.message);
  tooltipStyle.width = maxLength * 15 + "px";
  tooltipStyle["margin-left"] = -maxLength * 15 + "px";
};

const setToUpper = (extractNumber) => {
  if (messageRef.value) {
    const height = messageRef.value.offsetHeight;
    tooltipStyle["margin-top"] = -height + "px";
  }
};

const setToBottom = (extractNumber) => {
  if (messageRef.value) {
    const height = messageRef.value.offsetHeight;
    tooltipStyle["margin-top"] = "-40px";
  }
};

defineExpose({
  setToRight,
  setToLeft,
  setToUpper,
  setToBottom,
});
</script>

<style scoped>
/* 图标容器，用于定位图标和文本框 */
.icon-container {
  position: relative;
  display: inline-block;
}

/* 自定义图标样式 */
.custom-icon {
  width: 43px; /* 根据需要调整图标的大小 */
  height: 43px;
  object-fit: contain; /* 确保图标保持比例 */
}

/* 自定义图标悬浮样式 */
.custom-icon:hover {
  cursor: pointer;
}

/* 文本框的样式 */
.tooltip {
  padding: 5px;
  background-color: rgb(19, 19, 87);
  color: white;
  font-size: 14px;
  opacity: 0.9;
  white-space: pre-wrap; /* 使文本按照换行符 \n 换行 */
}
</style>
